<template>
    <div
      :style="{ backgroundColor: chatStatue === 'open' ? '#40c9ff' : '#888888' }"
      class="chat-info-status-style"
    >
      {{ chatStatusContent }}
    </div>
  </template>
  
  <script lang="ts">
  export default {
    name: 'chat-info-status',   
    props: {
      chatStatue: {
        type: String,
        required: true,
      },
      chatStatusContent: {
        type: String,
        required: true,
      },
    },
  };
  </script>
  
  <style scoped>
    .chat-info-status-style{
        width: 100%;
        height: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2.5vw;
        color: white;
        position: fixed;
        top:0;
        left:0;
        z-index: 20;
    }
  </style>